<template>
  <zh-sheet :transprent="props.transprent" :margin="props.margin" :padding="props.padding">
    <zh-sheet :margin="[0, 0]" :padding="[10, 0]" :transprent="props.transprent" :round="props.round" :text="props.text" :color="_color">
      <view class="flex-row-center-start" :style="{ 'min-height': _height + 'rpx' }">
        <view v-if="props.prefix" class="pr-6">
          <tm-icon _style="transition:color 0.24s" :font-size="props.fontSize" :color="props.prefixColor" :name="props.prefix"></tm-icon>
        </view>
        <view v-if="props.prefixLabel" class="pr-14" :style="{ width: props.prefixWidth + 'rpx' }">
          <zh-text _style="transition:color 0.24s" :font-size="props.fontSize" :color="props.prefixColor" :label="props.prefixLabel"></zh-text>
        </view>
        <view style="width: 100%" class="pl-10" @click="onClick" :class="props.inputAlign === 'left' ? 'flex-row-center-start' : 'flex-row-center-end'">
          <zh-text
            unit="px"
            :followTheme="false"
            :color="allAttrs.disabled ? '#8799a3' : propsDetail.fontColor"
            :font-size="propsDetail.fontSize_px"
            v-if="props.modelValue"
            :label="props.modelValue"
          ></zh-text>
          <zh-text color="#9E9E9E" :font-size="props.fontSize" v-if="!props.modelValue" :label="props.placeholder"></zh-text>
        </view>
        <view class="pl-16" v-if="props.suffix">
          <tm-icon _style="transition:color 0.24s" :font-size="props.fontSize" :color="props.suffixColor" :name="props.suffix"></tm-icon>
        </view>

        <view v-if="props.suffixLabel" class="pl-16">
          <zh-text _style="transition:color 0.24s" :font-size="props.fontSize" :color="props.suffixColor" :label="props.suffixLabel"></zh-text>
        </view>
      </view>
    </zh-sheet>
  </zh-sheet>
</template>

<script lang="ts" setup name="zh-select">
import { computed, PropType, ref, watch, useAttrs, defineEmits, toRaw } from 'vue';
import { custom_props, computedTheme, computedClass, computedStyle, computedDark } from '@/tool/lib/minxs';

import systemConfigStore from '@/store/modules/systemConfigStore';
const store = systemConfigStore();
const props = defineProps({
  followTheme: {
    type: [Boolean, String],
    default: false,
  },
  //默认的聚集状态
  focus: {
    type: Boolean,
    default: false,
  },
  height: {
    type: Number,
    default: 64,
  },
  //前缀宽度
  prefixWidth: {
    type: Number,
    default: 150,
  },
  prefixColor: {
    type: String,
    default: 'black',
  },
  suffixColor: {
    type: String,
    default: '',
  },
  //前缀图标
  prefix: {
    type: String,
    default: '',
  },
  //前缀文字
  prefixLabel: {
    type: String,
    default: '',
  },
  //后缀图标
  suffix: {
    type: String,
    default: '',
  },
  //后缀文字
  suffixLabel: {
    type: String,
    default: '',
  },

  text: {
    type: Boolean,
    default: true,
  },
  margin: {
    type: Array as PropType<Array<number>>,
    default: () => [0, 0],
  },
  round: {
    type: Number,
    default: 3,
  },
  transprent: {
    type: [Boolean, String],
    default: true,
  },
  placeholder: {
    type: String,
    default: '',
  },
  fontSize: {
    type: Number,
    default: 30,
  },
  padding: {
    type: Array as PropType<Array<number>>,
    default: () => [0, 0],
  },
  modelValue: {
    type: [Number, String, Boolean, Array],
    default: undefined,
  },
  inputAlign: {
    type: String,
    default: '',
  },
  color: {
    type: String,
    default: '#8799a3',
  },
  //激活时的主题配色。
  focusColor: {
    type: String,
    default: 'primary',
  },
  extend: {
    // 扩展属性，对象形式，存放组件的扩展属性
    type: Object,
    default: () => {
      return {};
    },
  },
});
const attrs = useAttrs();
const emits = defineEmits(['click']);
const allAttrs = computed(() => {
  return Object.assign(props.extend, attrs);
});
const _height = computed(() => (store.uiStyle === 'elder' ? props.height + 20 : props.height));
// 设置响应式全局组件库配置表。

const propsDetail = computed(() => {
  return {
    ...props,
    fontColor: allAttrs.value.disabled ? '#8799a3' : props.fontColor || props.color,
    fontSize_px: uni.upx2px(props.fontSize),
  };
});
//是否聚焦中。
const _foucsActive = ref(props.focus || false);
watch(
  () => props.focus,
  () => {
    _foucsActive.value = props.focus;
  }
);
const _color = computed(() => {
  let color = props.color;
  if (_foucsActive.value) {
    if (props.followTheme && store.color) {
      color = store.color;
    } else {
      color = props.focusColor;
    }
  }
  return color;
});

function onClick() {}
onMounted(() => {});

//------------------监听--------------------------------
</script>

<style scoped></style>
